
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>统计表</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/charts/Chart.js"></script>
    <script  src="js/echarts/echarts-all.js"></script>
<!--    <script src="/js/charts/china.js"></script>-->
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script type="text/javascript" src="/echart/china.js"></script>

    <link href="/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="/css/table.css" rel="stylesheet" type="text/css">

    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
<!--    <script type="text/javascript" src="/json/china.json"></script>-->
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div id="app">
    <div id="main" style="height:350px;width: 98%"></div>
</div>

</body>
<script type="text/javascript" >
    $(document).ready(function() {
        var myChart = echarts.init(document.getElementById('main'));
        // $.get('/json/china.json',function(ret) {
        //         echarts.registerMap('chinaMap', ret);
        var Name = [];
        var nums = [];
        var datatemp = [];
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/company/china",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    Name.push(result[i].job_add);
                     console.log("3")
                    nums.push(result[i].companysum);
                    var ob = {name: "", value: ""};
                    ob.name = result[i].job_add;
                    ob.value = result[i].companysum;
                    datatemp.push(ob);
                    console.log("2")
                }
                    var option = {
                        visualMap: {
                            min: 0,
                            max: 12,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            inRange: {
                                color: ['pink', 'red']
                            }
                        },
                        geo: {
                            map: 'china',
                            roam: false,
                            zoom: 1.23,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: '10',
                                    color: 'rgba(0,0,0,0.7)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(0, 0, 0, 0.2)'
                                },
                                emphasis: {
                                    areaColor: '#F3B329',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },

                        series: [
                            {
                                name: '民事案件',
                                type: 'map',
                                mapType: 'china',
                                geoIndex: 0,
                                data: datatemp,
                                label: {
                                    show: true
                                },
                            }

                        ]
                    };
                    myChart.setOption(option)
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    })


</script>

</html>

<script>
    new Vue({
        el:"#app",
        data:{
            company:{}
        },
        methods:{
        },

        mounted() {
            _this = this
            axios.get('/company/list')
                .then(function (response) {
                    _this.company = response.data
                    console.log(_this.company);
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
    })
</script>




